window.onload =
    function ()
    {
        // background
        var paper = new Raphael('container-background');
        var background = paper.image('mario_level_1.png', 0, 0, 256, 240);

        // mario
        var stage =
            new Kinetic.Stage(
            {
                container: 'container-mario',
                width: 256,
                height: 240
            });
        var layer = new Kinetic.Layer();

        var marioSprites = new Image();
        marioSprites.onload =
            function()
            {
                var mario =
                    new Kinetic.Sprite(
                    {
                        x: 130,
                        y: 191,
                        image: marioSprites,
                        animation: 'moveLeft',
                        animations:
                        {
                            moveRight:
                            [
                                230, 0, 25, 25,
                                260, 0, 25, 25,
                                290, 0, 25, 25,
                                260, 0, 25, 25
                            ],
                            moveLeft:
                            [
                                140, 0, 25, 25,
                                110, 0, 25, 25,
                                80, 0, 25, 25,
                                110, 0, 25, 25
                            ]
                        },
                        frameRate: 6,
                        frameIndex: 0
                    });

                layer.add(mario);

                stage.add(layer);

                mario.start();
                var isCurrentlyMovingLeft = true;
                var isCurrentlyMovingRight = false;
                window.addEventListener(
                    "keydown",
                    function(e)
                    {
                        switch(e.keyCode)
                        {
                            case 37: // LeftArrow
                                if (isCurrentlyMovingLeft)
                                {
                                    mario.setX(mario.getX() - 3);
                                }
                                else
                                {
                                    mario.animation('moveLeft');
                                    isCurrentlyMovingLeft = true;
                                    isCurrentlyMovingRight = false;
                                }

                                break;
                            case 39:
                                if (isCurrentlyMovingRight)
                                {
                                    mario.setX(mario.getX() + 3);
                                }
                                else
                                {
                                    mario.animation('moveRight');
                                    isCurrentlyMovingRight = true;
                                    isCurrentlyMovingLeft = false;
                                }

                                break;
                        }
                    });

                /*
                var frameCount = 0;

                mario.on(
                    'frameIndexChange',
                    function(evt)
                    {
                        if (mario.animation() === 'punch' && ++frameCount > 3)
                        {
                            mario.animation('idle');
                            frameCount = 0;
                        }
                    });

                document.getElementById('punch').addEventListener('click', function() {
                    mario.animation('punch');
                }, false);
                */
            };

        marioSprites.src = "mario_sheet_sprites.png";
    };